<template>
  <view class="u-page">
    <view class="flex m-10 just-b">
      <view class="area m-r-10">
        <view class="area-btn province" @click="openProvince">{{
          cityname
        }}</view>
        <view class="border border-fff"></view>
        <view class="area-btn address" @click="openAddress">
          <uv-icon
            name="map-fill"
            color="#fff"
            size="14"
            class="m-r-10"
          ></uv-icon>
          {{ address ? address[citytype] : "定位中" }}</view
        >
      </view>
      <view class="area m-r-10">
        <!-- <view class="time-btn province" @click="openStartTime">{{ startTimeDate }}</view>
        <view>~</view>
        <view class="time-btn address" @click="openEndTime"> {{ endTimeDate }}</view> -->
        <uni-datetime-picker
          v-model="range"
          type="daterange"
          @change="maskClick"
        >
          <view class="time-btn">{{ startTimeDate }} ~ {{ endTimeDate }}</view>
        </uni-datetime-picker>
      </view>
      <uv-button
        size="small"
        type="primary"
        text="查看"
        @click="loadData"
      ></uv-button>
    </view>
    <div class="tencent-container">
      <map
        style="width: 100%; height: 100%"
        :scale="12"
        :latitude="latitude"
        :longitude="longitude"
        :markers="ordList"
        :circles="circles"
        @regionchange="regionchange"
      ></map>
    </div>
    <view class="bottomTips" id="count">
      <view class="flex flex-align-center" v-if="dataCount.all > 0">
        <text>单量: {{ dataCount.all }}单</text
        ><view class="border border-ccc"></view>
        <text
          >退款: {{ dataCount.refund }}单({{
            ((dataCount.refund / dataCount.all) * 100).toFixed(2)
          }}%)</text
        >
      </view>
      <view class="flex flex-align-center" v-else>
        <text>单量: 0单</text><view class="border border-ccc"></view>
        <text>退款: 0单(0.00%)</text>
      </view>
    </view>
    <uv-picker
      ref="areaRef"
      round="16"
      :columns="areaColumns"
      keyName="name"
      @confirm="areaConfirm"
    ></uv-picker>
    <uv-datetime-picker
      ref="datetimeStartPicker"
      v-model="startTime"
      mode="date"
      @confirm="startTimeConfirm"
    >
    </uv-datetime-picker>
    <uv-datetime-picker
      ref="datetimeEndPicker"
      v-model="endTime"
      mode="date"
      @confirm="endTimeConfirm"
    >
    </uv-datetime-picker>
  </view>
</template>

<script>
import { getAddressForPos } from "@/utils";
import { totime_day, setInitTime } from "@/utils";
// import { queryorder } from '@/api/setting'
export default {
  props: {
    user_id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      startTime: setInitTime(),
      endTime: setInitTime(),
      circles: [],
      latitude: 29.55314,
      longitude: 106.5686,
      ordList: [],
      dataCount: {
        all: 0,
        refund: 0,
      },
      range: "",
      address: undefined,
      cityname: "区县",
      citytype: "district",
      areaColumns: [
        [
          { key: "province", name: "省" },
          { key: "city", name: "市" },
          { key: "district", name: "区县" },
        ],
      ],
    };
  },
  mounted() {
    uni.getLocation({
      type: "wgs84",
      success: (res) => {
        this.getAddress(res.latitude, res.longitude);
      },
    });
  },
  computed: {
    startTimeDate() {
      return totime_day(this.startTime);
    },
    endTimeDate() {
      return totime_day(this.endTime);
    },
  },
  methods: {
    maskClick(e) {
      let [start, end] = e;
      this.startTime = start;
      this.endTime = end;
    },
    openEndTime() {
      this.$refs.datetimeEndPicker.open();
    },
    endTimeConfirm(val) {
      this.endTime = val.value;
    },
    openStartTime() {
      this.$refs.datetimeStartPicker.open();
    },
    startTimeConfirm(val) {
      this.startTime = val.value;
    },
    getAddress(lat, lng) {
      this.latitude = lat;
      this.longitude = lng;
      getAddressForPos(this.latitude, this.longitude).then((res) => {
        this.address = res;
      });
    },
    openProvince() {
      this.$refs.areaRef.open();
    },
    areaConfirm(e) {
      const { key, name } = e.value[0];
      this.citytype = key;
      this.cityname = name;
    },
    regionchange(e) {
      const { detail } = e;
      if (detail.type === "end") {
        this.latitude = detail.centerLocation.latitude;
        this.longitude = detail.centerLocation.longitude;
        this.getAddress(this.latitude, this.longitude);
      }
    },
    openAddress() {
      uni.chooseLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        success: (res) => {
          this.getAddress(res.latitude, res.longitude);
        },
      });
    },
    async loadData() {
      this.dataCount = {
        all: 0,
        refund: 0,
      };

      this.$http
        .http(
          "masterchannel/index/queryorder",
          {
            user_id: this.user_id,
            start: this.startTime,
            end: this.endTime,
            cityname: this.address[this.citytype],
            citytype: this.citytype,
          },
          "POST"
        )
        .then((res) => {
          if (res.code === 1) {
            let data = [];
            for (let item of res.data) {
              this.dataCount.all++;
              item.order_status == 7 ? this.dataCount.refund++ : null;

              data.push({
                latitude: item.lat,
                longitude: item.lng,
                iconPath: "../../static/paynum.png",
                width: 32,
                height: 32,
                callout: {
                  content: `￥${item.pay_money}`,
                  fontSize: 12,
                  padding: 4,
                  display: "ALWAYS",
                  color: "#ffffff",
                  bgColor: "#ff007f8a",
                  borderWidth: 1,
                  borderColor: "#ffffff",
                  borderRadius: 10,
                },
              });
            }
            this.ordList = data;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin border-right-color($color) {
  border-right: 1px solid $color;
}
.u-page {
  height: 100%;
}
.tencent-container {
  width: 100%;
  height: calc(100% - 120rpx);
}
.bottomTips {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 80rpx;
  line-height: 35px;
  background-color: #fff;
  z-index: 10;
  padding: 0 16px;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.border {
  height: 18px;
  margin: 0 5px;
}
.border-ccc {
  @include border-right-color(#ccc);
}
.border-fff {
  @include border-right-color(#fff);
}
.area {
  color: #fff;
  border-radius: 3px;
  background-color: #3c9cff;
  display: flex;
  align-items: center;
}
.time-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.area-btn {
  min-width: 30px;
  height: 30px;
  padding: 0px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
}
.m-10 {
  margin: 10rpx;
}
.just-b {
  justify-content: space-between;
}
</style>
